<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">耗材基础信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '150px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="耗材名称">{{
              formState?.name
            }}</a-descriptions-item>
            <a-descriptions-item label="品牌">
              {{ formState?.brand }}
            </a-descriptions-item>
            <a-descriptions-item label="当前库存">{{
              formState?.total_stock
            }}</a-descriptions-item>
            <a-descriptions-item label="计量单位">{{
              formState?.unit
            }}</a-descriptions-item>
             <a-descriptions-item label="安全库存下限">{{
              formState?.stock_min
            }}</a-descriptions-item>
             <a-descriptions-item label="安全库存上限">{{
              formState?.stock_max
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import api from "@/api";
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const formState = ref({})
const query = computed(() => route.query);
//获取耗材详情
const getConsumableDetail = async () => {
  const res = await api.apiConsumableFetchModelPost({
    consumable_id: query.value.consumable_id
  })
  console.log(res)
  formState.value = res.data
}
onMounted(async () => {
  await getConsumableDetail();
});
</script>
